import React, { useEffect } from 'react';
import { Space, Button, DatePicker } from 'antd';
import moment from 'moment';

import { useTRState, TjStation, TjSegmented, TjSelect } from '@/pages/ETrade/components';
import { operators, gs_operators, points, dataPoints } from './helper';
const defaultForm = () => {
  // 默认表单
  const dates =
    new Date().getDate() === 1
      ? [moment().add(-1, 'months').startOf('month'), moment().add(-1, 'months').endOf('month')]
      : [moment().startOf('month'), moment()];
  return {
    dates,
    dataTimeOrderType: '96',
    dataType: 'CS',
  };
};

export default ({ power = [], onChange = () => {} }) => {
  const [state, setState] = useTRState({
    ...defaultForm(),
    region: null,
    stationIdList: [],
    stationOptions: [],
  });

  useEffect(() => {
    onChangeRegion(power?.[0]);
    _onFinish();
  }, []);

  const onChangeRegion = (opt) => {
    // 切换省份
    const stationOptions = opt?.children || [];
    const stationIdList = _.flattenDeep(
      stationOptions.map((x) => x?.children?.map((y) => y.value)),
    );
    state.region = opt;
    state.stationIdList = stationIdList;
    setState({
      region: opt,
      stationIdList,
      stationOptions,
      dataType: 'CS',
    });
  };

  const _onFinish = (dataType, segmented, reset) => {
    // 查询
    const { dates, stationIdList, dataTimeOrderType, region } = state;
    const params = {
      region: region.provinceId,
      stationIdList,
      dataTimeOrderType,
      startDate: dates[0].format('YYYY-MM-DD'),
      endDate: dates[1].format('YYYY-MM-DD'),
      marketId: region.marketId,
      operators: operators,
    };
    if (region.provinceId === '21') {
      // 如果选择辽宁
      params.dataType = segmented ? dataType : state.dataType;
    }
    // 如果选择甘肃省
    if (region.provinceId === '62') {
      params.newOperators = gs_operators;
      params.newWay = true;
    }

    if (region.provinceId === '23') {
      // 黑龙江
      params.dataType = 'CS';
    }

    onChange?.(params, reset); // 通知父级
  };

  const _onReset = () => {
    // 重置
    const { dates, dataTimeOrderType } = defaultForm();
    state.dates = dates;
    state.dataTimeOrderType = dataTimeOrderType;
    setState({
      dates,
      dataTimeOrderType,
    });
    onChangeRegion(power?.[0]);
    _onFinish('CS', true, true);
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1 }}>
      <Space size={16} wrap>
        <TjSelect
          style={{ width: 200 }}
          value={state.region?.value}
          options={power}
          showSearch
          filterOption={(input, option) => {
            return (option?.label).toLowerCase().includes(input.toLowerCase());
          }}
          onChange={(v, temp) => onChangeRegion(temp)}
        />
        <TjStation
          style={{ width: 160 }}
          value={state.stationIdList}
          options={state.stationOptions}
          onChange={(stationIdList) => setState({ stationIdList })}
        />
        <DatePicker.RangePicker
          style={{ width: 256 }}
          value={state.dates}
          separator="-"
          format={'YYYYMMDD'}
          allowClear={false}
          onChange={(dates) => setState({ dates })}
        />
        <TjSegmented
          value={state.dataTimeOrderType}
          options={points}
          onChange={(dataTimeOrderType) => setState({ dataTimeOrderType })}
        />
        <Space size={16}>
          <Button style={{ width: 98, height: 32 }} type="primary" onClick={_onFinish}>
            查询
          </Button>
          <Button style={{ width: 98, height: 32 }} ghost onClick={_onReset}>
            重置
          </Button>
        </Space>
      </Space>
      {state.region?.provinceId === '21' ? (
        <TjSegmented
          value={state.dataType}
          options={dataPoints}
          onChange={(dataType) => {
            setState({ dataType });
            _onFinish(dataType, true);
          }}
        />
      ) : null}
    </div>
  );
};
